<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/element-ui/index.css"/>
    <link rel="stylesheet" href="../styles/icon/iconfont.css"/>

    <style>
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }

        .el-aside {
            color: #333;
        }
    </style>
</head>
<body>

<div id="app">


    <el-container style="height: 500px; border: 1px solid #eee">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-menu :default-openeds="['2']">
                <el-submenu index="2">
                    <template slot="title"><i class="el-icon-menu"></i>博客系统</template>
                    <el-menu-item-group>
                        <template slot="title">分类表</template>
                        <el-menu-item index="2-1" @click="">查询所有分类</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="博客表">
                        <el-menu-item index="2-3" @click="blogFindAll">查询所有博客</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>

            </el-menu>
        </el-aside>

        <el-container>
            <el-header style="text-align: right; font-size: 12px">
                <el-dropdown>
                    <i class="el-icon-setting" style="margin-right: 15px"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>查看</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <span>王小虎</span>
            </el-header>



            <el-main
                    id="blogTable"
                    style="display: none">
                <template>
                    <el-row>
                        <el-button type="success" round @click="beforeAdd">新增</el-button>
                    </el-row>
                    <el-table
                            :data="blogs.filter(data => !categoryName || data.categoryName.toLowerCase().includes(categoryName.toLowerCase()))"
                            style="width: 100%">
                        <el-table-column
                                prop="blogId"
                                label="博客ID"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="categoryName"
                                label="分类名"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="title"
                                label="标题"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="author"
                                label="作者"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                align="right">
                            <template slot="header" slot-scope="scope">
                                <el-input
                                        v-model="categoryName"
                                        size="mini"
                                        placeholder="请输入分类名赛选"/>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>

            </el-main>
        </el-container>
    </el-container>



</div>


</body>


<script src="../plugins/vue/vue.js"></script>
<script src="../plugins/element-ui/index.js"></script>
<script src="../plugins/axios/axios.min.js"></script>
<script src="../js/request.js"></script>
<script src="../api/blog.js"></script>
<script src="../api/category.js"></script>

<script>
    new Vue({
        el:"#app",
        data(){
            return{
                blogs:[],
                search:'',
                categoryName:'',
            }
        },
        mounted(){
            // this.blogFindAll();
        },
        methods:{

            blogFindAll(){
                blogTable.style.display='block';
                blogFindAllApi().then(res=>{
                    // console.log(res);
                    this.blogs=res.data.data;
                })
            },
            // categoryFindAll() {
            //   categoryFindAllApi().then(res=>{
            //       this.categories=res.data.data;
            //   })
            // },
            // blogFindById(id){
            //     blogFindByIdApi(id).then(res=>{
            //         this.updateform=res.data.data;
            //     })
            // },

        }
    })
</script>

</html>